<template>
    <div>
        <Input suffix="ios-search" placeholder="请选择用户" :value="userName" readonly @on-focus="openModal"/>
        <Modal v-model="modal" width="1200" :mask-closable="false" title="用户列表" footer-hide>
            <div ref="topDiv">
                <Split v-model="split1" style="height: 100%; " class="demo-split">
                    <div slot="left" style="height: 100%; overflow-y: auto; overflow-x: hidden; padding: 5px">
                        <Tree ref="tree" :data="treeData" :load-data="loadData" :render="renderContent" style="width: 100%"></Tree>
                    </div>
                    <div slot="right" class="demo-split-pane">
                        <Form :label-width="90" ref="formInline" :model="formInline">
                            <Row :gutter="16" class="query-form">
                                <i-col span="8">
                                    <FormItem label="姓名：">
                                        <Input class="query-form-el" v-model="formInline.userName"></Input>
                                    </FormItem>
                                </i-col>
                                <i-col span="8">
                                    <FormItem label="登录账号：">
                                        <Input class="query-form-el" v-model="formInline.loginId"></Input>
                                    </FormItem>
                                </i-col>
                                <i-col span="8">
                                    <div style="float: right;">
                                        <Button class="ivu-btn-reset" @click="cancel">重置</Button>
                                        <Button class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                                    </div>
                                </i-col>
                            </Row>
                        </Form>
                        <Table ref='table' :loading="loading" border :columns="columns" no-data-text="没有查询到相关数据！" style="margin: 5px"
                               :data="infos" width="100%" :height="tableHeight2"  highlight-row stripe size="small"></Table>
                        <Page :total="pagedata.total" :fromPage="pagedata.fromPage" :pageSize="pagedata.pageSize"
                              @on-change="pageChange" @on-page-size-change='sizeChange' show-total show-sizer show-elevator/>
                    </div>
                </Split>
            </div>
        </Modal>
    </div>
</template>

<script>

    import {Api} from '../../../api'
    import {sessionStorage} from '@/common/cacheUtils.js';


    export default {
        props: {userInfo: {}},
        name: "inputUser",
        data(){
            return{
                userName: '',
                tableHeight2: '',
                loading: false,
                modal: false,
                split1: 0.3,
                treeData: [],
                selectNodeInfo: {},
                formInline: {},
                columns: [
                    {
                        // type: 'index',
                        title: "序号",
                        width: 80,
                        align: 'center',
                        render: (h, params) => {
                            return h('span', params.index + (this.pagedata.fromPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                    {
                        title: '姓名',
                        width: 100,
                        align: 'center',
                        key: 'userName'
                    },
                    {
                        title: '登录账号',
                        width: 100,
                        align: 'center',
                        key: 'loginId',
                    },
                    {
                        title: '二级集团',
                        minWidth: 200,
                        align: 'center',
                        key: 'twoLevelOrgName'
                    },
                    {
                        title: '公司',
                        minWidth: 200,
                        align: 'center',
                        key: 'companyName'
                    },
                    {
                        title: '部门',
                        minWidth: 200,
                        align: 'center',
                        key: 'orgName'
                    },
                    {
                        title: '岗位',
                        minWidth: 150,
                        align: 'center',
                        key: 'positionName'
                    },
                    {
                        title: '操作',
                        fixed: 'right',
                        align: 'center',
                        width: 100,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$emit('setUserInfo', params.row);
                                            this.userName = params.row.userName;
                                            this.modal= false;
                                        }
                                    }
                                }, '选择'),
                            ]);
                        }
                    }
                ],
                infos: [],
                pagedata: {
                    total: 0, //总条数
                    fromPage: 1,//从n条开始
                    pageSize: 10//每页多少条
                },
            }
        },
        mounted(){
            this.$refs.topDiv.style.height = (window.innerHeight - 180) + 'px';
            this.tableHeight2 = window.innerHeight - 310;
            if(this.userInfo!=undefined) this.userName = this.userInfo.userName;
            this.initializationTree();
        },
        methods: {
            initializationTree(){
                let user = sessionStorage('userId').getObject('userId');
                this.$http.get(Api.orgInfoTree, {params: { parentId: user.companyId }} ).then(res => {
                    let data = {
                        id: user.companyId,
                        title: user.companyName,
                        expand: true,
                        children: []
                    }
                    res.data.data.map((i)=>{
                        data.children.push({
                            id: i.orgId,
                            title: i.orgName,
                            children: [],
                            loading: false,
                        })
                    });
                    this.treeData.push(data);
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            openModal(){
                this.modal = true;
                this.query();
            },
            loadData(item, callback) {
                this.$http.get(Api.orgInfoTree, {params: { parentId: item.id }} ).then(res => {
                    let data = [];
                    res.data.data.map((i)=>{
                        data.push({
                            id: i.orgId,
                            title: i.orgName,
                            children: [],
                            loading: false,
                        })
                    });
                    callback(data);
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                    },
                    on:{
                        click: () => {
                            this.selectNodeInfo = data;
                            this.query();
                        }
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: "ios-folder-outline",
                            },
                            style: {
                                marginRight: '8px',
                            }
                        }),
                        h('span', data.title)
                    ])
                ])
            },
            query(){
                this.loading = true;
                let user = sessionStorage('userId').getObject('userId');

                let data = {
                    fromPage : this.pagedata.fromPage,
                    pageSize : this.pagedata.pageSize,
                    companyId: user.companyId
                };
                if(JSON.stringify(this.selectNodeInfo) != "{}") data.orgId = this.selectNodeInfo.id; else user.companyId;
                data = Object.assign(data, JSON.parse(JSON.stringify(this.formInline)));
                this.$http.get(Api.queryUser, {
                    params: data
                }).then(res => {
                    res.data.data.map(i => {
                        if(i.orgInfo != null) {
                            i.orgName = i.orgInfo.orgName;
                            i.orgId = i.orgInfo.orgId;
                            if (i.position != null) {
                                i.positionId = i.position.positionId
                                i.positionName = i.position.positionName
                            }
                        }
                    })
                    this.pagedata.total = res.data.total;
                    this.infos = res.data.data;
                    this.loading = false
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            cancel(){
                this.formInline = {};
                this.query();
            },
            sizeChange(size) {
                this.pagedata.pageSize = size
                this.query()
            },
            pageChange(pagenum) {
                this.pagedata.fromPage = pagenum
                this.query()
            },
        }
    }
</script>

<style lang='css' scoped>
    @import '../../../index.css';
    .demo-split{
        height: 200px;
        border: 1px solid #dcdee2;
    }
    .demo-split-pane{
        padding: 10px;
    }
</style>
